<template>
    <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
        :current-page="pageNum" 
        :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" 
        layout="total, sizes, prev, pager, next, jumper"
         :total="total">
        </el-pagination>
    </div>
</template>
<script>
export default {
  props: {
    pageSizes:Number,
    pageNums:Number,
    total:Number
  },
  data() {
    return {
        pageNum:this.pageNums,
        pageSize:this.pageSizes
    };
  },
  methods: {
    handleSizeChange(val){
        this.pageSize = val
        this.$emit('changeSize',this.pageSize)
    },
    handleCurrentChange(val){
         this.pageNum = val
        this.$emit('changeNum',this.pageNum)
    }
  },
};
</script>